<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <link href="./style.css" rel="stylesheet">
</head>
<body>
    <div class="content">
        <header>
            <h2 class="title">SVG.js Example</h2>
        </header>
        <content class="box">
            <div class="left">
                <ul id="examples">
                </ul>
            </div>
            <div class="right">
                <div id="title" class="header">来吧，朋友</div>
                <div id="frame" class="svgframe">
                    
                </div>
            </div>
        </content>
    </div>
</body>
<script>

    const exampleNames = ["circles",
        "path animation",
        "polygon filter animation",
        "shapes display",
        "shapes transform",
        "shapes",
        "stagger",
    ];
    const examplePaths = [
        "./circles.html",
        "./path_animation.html",
        "./polygon_filter_points_animation.html",
        "./shapes_display.html",
        "./shapes_transform.html",
        "./shapes.html",
        "./stagger2.html",
    ];

    const titles = [
        "circles - 来吧，朋友！",
        "path animation - 来吧，朋友！",
        "polygon filter animation - 来吧，朋友！",
        "shapes display - 来吧，朋友！",
        "shapes transform - 来吧，朋友！",
        "shapes - 舞蹈吧，胖小星！",
        "stagger - 来吧，朋友！",
    ];

    const titile = document.getElementById("title");
    function runExample() {
        const index = exampleNames.indexOf(this.innerHTML);
        if (index >= 0) {
            const path = examplePaths[index];
            iframe.src = path;
            titile.innerHTML = titles[index];
        }
    }

    var iframe = null
    function init() {
        var ul = document.getElementById("examples");
        for (var i=0; i < exampleNames.length; i++) {
            const li = document.createElement("li");
            li.innerHTML = exampleNames[i];
            li.onclick = runExample;//setAttribute
            ul.appendChild(li);
        }

        const width = document.body.clientWidth - 320;
        const height = document.body.clientHeight - 120;
        console.log(height)
        var frame = document.getElementById("frame");
        iframe = document.createElement("iframe");
        iframe.setAttribute("width", width);
        iframe.setAttribute("height", height);
        frame.appendChild(iframe);
    }

    init();
    

</script>
</html>